<template>
  <!-- 仓库列表 -->
  <div>
    <el-select v-model="regionCodeDefault" placeholder="请选择一个库位" @change="select" :size="size" clearable @clear="clear"
      ref="warehouseSelect" automatic-dropdown :popper-append-to-body="appendToBody">
      <el-option label="请选择" :value="undefined"></el-option>
      <el-option v-for="item in regionList" :key="item.id" :label="item.regionName"
        :value="item.regionCode"></el-option>
    </el-select>
  </div>
</template>

<script>
import { getRegionSelect } from "@/api/wms/region";

export default {
  name: "regionSelect",
  data() {
    return {
      warehouseCodeDefault: this.warehouseCode,
      regionCodeDefault: this.regionCode,
      regionList: [] // 列表
    };
  },
  computed: {
    // 计算属性,里面是个方法
  },
  props: {
    /** 上一级的仓库代码 */
    warehouseCode: {
      type: String,
      // required: true, // 必须传入
      default: undefined
    },
    /** 默认显示的库位 */
    regionCode: {
      type: String,
      // required: true, // 必须传入
      default: undefined
    },
    /**是否把元素插入到body上 */
    appendToBody: {
      type: Boolean,
      default: true
    },
    /** 	框的大小 medium / small / mini */
    size: {
      type: String,
      default: 'medium'
    }
  },
  watch: {
    warehouseCode: function (newVal, oldVal) {
      this.warehouseCodeDefault = newVal
      this.getData()
    },
    regionCode: function (newVal, oldVal) {
      this.regionCodeDefault = newVal
    }
  },
  methods: {
    /**
     * 设置获得焦点
     */
    setFocus() {
      this.$refs.warehouseSelect.focus()
    },
    /**
     * 选中的结果被清空的事件,通知上一层也清空
     */
    clear() {
      this.$emit("clear");
    },
    /**
     * 把选中的仓库对象反射出去,里面有id和名称
     */
    select(regioncode) {
      console.log("select:", regioncode);
      if (regioncode === undefined) {
        this.$emit("submit", undefined);
      } else {
        for (const item of this.regionList) {
          if (item.regionCode === regioncode) {
            this.$emit("submit", item);
          }
        }
      }
    },
    async getData() {
      if (this.$test.isEmpty(this.warehouseCodeDefault)) {
        return;
      }
      getRegionSelect(this.warehouseCodeDefault).then(response => {
        console.log("getRegionSelect:", response);
        this.regionList = response.data;
      });
    }
  },
  mounted() {
    // this.nextTick(() => {
    this.getData();
    // })
  }
};
</script>

<style lang="less" scoped></style>
